<template>
  
</template>

<script lang="ts">
import { defineComponent,ref } from "vue";

export default defineComponent({
  name: "App",
  //需求：页面打开后可以直接看到一个数据，点击按钮后，该数据可以发生变化

  //vue2的方式实现
  // data() {
  //   return {
  //     count: 0,
  //   };
  // },
  // methods: {
  //   updateCount() {
  //     this.count++
  //   },
  // },

  //vue3的方式实现
  setup() {
    //这个数据并不是响应式数据
    //（响应式数据：数据变化，页面跟着渲染变化）
    //let count = 0;

    //ref是一个函数，作用：定义一个响应式函数，返回的是一个ref对象，
    //ref对象中有一个value属性，如果需要对数据进行操作，
    //需要使用该ref对象调用vualue属性的方式进行数据操作
    //html模板中不需要.value属性的写法
    const count = ref(0);
    function updateCount() {
      console.log("ddd")
      //报错原因：count是一个ref对象，对象是不能进行++操作的
      count.value++;
    }
    return {
      count,
      updateCount
    }
  }
});
</script>